
#### Table of Contents

1. Introduction
2. Init NPM repo and setup packages
3. Add test Script at package.json
4. Add Javascript and Test
5. Run the npm run test

### Introduction

This blog shows how to get start quickly to test with JavaScript.

### Init NPM repo and setup packages

Here we will setup the npm repo, then later install the dependencies package `jest`.

```
npm init -y
```

```
npm install --save-dev jest
```

### Add test Script at `package.json`

Add `test` command with `jest`, now if we run `npm run test`, should run jest with default setting.

```Javascript
  "scripts": {
    "test": "jest"
  },
```

### Add Javascript and Test

Here, create a file and create few JavaScript functions.

```JavaScript
function sum(a, b) {
    return a + b;
}

function exponent(a,b) {
    return a ** b;
}

function subtraction(a, b) {
    return a -b;
}
module.exports = {
    sum,
    subtraction,
    exponent
};
```

Next, create test file and add test code.

```JavaScript
const {exponent, subtraction, sum} = require('../src/sample');

test('test sum', () => {
    expect(sum(1, 2)).toBe(3);
});

test('test subtraction', () => {
    expect(subtraction(10, 2)).toBe(8);
});

test('test exponent', () => {
    expect(exponent(5, 2)).toBe(25);
});
```

### Run the `npm run test`

That's it, now we can see the test passed.

![Cloud Functions to Firestore](/images/start-setup-jest/img1.png)


This blog shows how to get start quickly to test with Javascript

How to get Start with Jest


###

```Javascript
if (window.Worker) {
    const myWorker = new Worker("/js/worker/worker.js");

    var ga = window.ga;

    myWorker.postMessage([ga, document.querySelector("button").textContent]);

    myWorker.onmessage = function(e) {
        console.info('main.js', e);
    }
}
```

```Javascript
// able to load console at worker thread
console.info('worker');

// can't access document
try {
    var getButtonText = self.document.querySelector("button").textContent;
} catch (error) {
    console.error(error);
}

// can't access main thread's window object
try {
    var x = self.window.ga;
} catch (error) {
    console.error(error);
}

onmessage = function(e) {
    console.info(e);
}
```

```HTML
  <script src="js/worker/main.js"></script>
```

```Javascript

fetch('js/worker.js')
.then(res => res.blob())
.then(blob => {

    var blobUrl = URL.createObjectURL(blob);
    console.log(blobUrl);

    var worker = new Worker(blobUrl);

});
```

- https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API#worker_global_contexts_and_functions
- https://web.dev/learn/performance/web-worker-demo
- https://web.dev/articles/workers-basics#:~:text=You%20can%20load%20external%20script,with%20the%20importScripts()%20function.
- https://partytown.builder.io/partytown-scripts


Get Start with Web Worker


#### Table of Contents

1. Introduction
2. Install Packages
3. Create babel.config.js
4. Create jest.config.ts
5. Change the Code sample.js to TypeScript sample.ts
6. Change the Jest sample.test.js to TypeScript sample.test.ts
7. Run npm run test

### Introduction

This blog shows how to get start use TypeScript to write code and also write in Jest.

### Install Packages

If you have not use Jest, can reference this to get start with Jest with JavaScript, [Get Start with Jest](/blog/post/start-setup-jest).

At here, we'll start install necessary NPM packages for use TypeScript at Jest and the code.

```
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @jest/globals @types/jest babel-jest ts-jest ts-node typescript
```

### Create `babel.config.js`

```JavaScript
module.exports = {
    presets: [
      ['@babel/preset-env', {targets: {node: 'current'}}],
      '@babel/preset-typescript',
    ],
  };
```

### Create `jest.config.ts`

```JavaScript
export default {
    clearMocks: true,
    collectCoverage: true,
    coverageDirectory: "coverage"
}
```

### Change the Code `sample.js` to TypeScript `sample.ts`

### Change the Jest `sample.test.js` to TypeScript `sample.test.ts`

```JavaScript
import {exponent, subtraction, sum} from '../src/sample';
import {describe, expect, test} from '@jest/globals';

describe('calculator', () => {
    test('test sum', () => {
        expect(sum(1, 2)).toBe(3);
    });

    test('test subtraction', () => {
        expect(subtraction(10, 2)).toBe(8);
    });

    test('test exponent', () => {
        expect(exponent(5, 2)).toBe(25);
    });
})
```

### Run `npm run test`

Now, if run `npm run test` and if everything works, should see test all passed and 100% coverage.


This blog shows how to get start use TypeScript to write code and also write in Jest.

Category Javascript

How to get Start with Jest

Get Start with Web Worker

How to use TypeScript with Jest